<template>
    <Card :padding="10" dis-hover>
        <Row>
            <Col span="10">
            <Form :model="formItem" ref="form" :label-width="150" inline style="padding-top:8px;">

                <FormItem label="机构名称" prop="name"><Input v-model="formItem.name" placeholder="" style="width: 200px" />
                </FormItem>

                <FormItem label="所属省/市" prop="city1">
                    <City v-model="formItem.city1" @on-change="chg" />
                </FormItem>

            </Form>
            </Col>
            <Col span="14">
            <Space><Button type="primary" icon="ios-search" @click="initList()">搜索</Button><Button type="error"
                    @click="clear" icon="md-refresh">重置</Button><Button type="success" @click="add(1, {})"
                    icon="md-add">新增</Button>
            </Space>
            </Col>
        </Row>


        <Row>
            <Col span="24">
            <Table row-key="tenantID" :columns="table.columns" :data="table.data" :loading="table.load" size="small"
                border>
                <template #Action="{ row }">
                    <Space v-if="!row.children.length > 0">
                        <Tooltip content="编辑" placement="top" transfer><Button type="primary" icon="md-create"
                                @click="add(2, row)"></Button></Tooltip>
                        <Poptip transfer confirm title="是否启用?" @on-ok="cancel(row.tenantID, 0)" ok-text="是"
                            cancel-text="否">
                            <Tooltip content="启用" placement="top" transfer><Button type="error" icon="md-close-circle"
                                    v-if="row.isDel"></Button></Tooltip>
                        </Poptip>
                        <Poptip transfer confirm title="是否禁用?" @on-ok="cancel(row.tenantID, 1)" ok-text="是"
                            cancel-text="否">
                            <Tooltip content="禁用" placement="top" transfer><Button type="error" icon="md-close-circle"
                                    v-if="!row.isDel"></Button></Tooltip>
                        </Poptip>
                    </Space>
                </template>
                <template #AddTime="{ row }"><span v-if="!row.children.length > 0">{{ row.addTime }}</span></template>
                <template #UpdTime="{ row }"><span v-if="!row.children.length > 0">{{ row.updTime }}</span></template>
            </Table>
            </Col>
        </Row>
    </Card>
    <AddOrUpdate ref="modal" @initList="initList()"></AddOrUpdate>
</template>
<script setup>
import http from '@/util/http'
import { reactive } from 'vue'
import AddOrUpdate from './AddOrUpdate.vue'
let { proxy } = getCurrentInstance()
let form = ref()
let modal = ref()

let formItem = reactive({
    name: '',
    province: '',
    city: '',
    city1: ''
})
let table = reactive({
    data: [],
    total: 0,
    columns: [
        {
            title: '机构名称',
            align: 'left',
            key: 'name',
            tree: true,
        },
        {
            title: '机构代码',
            align: 'center',
            key: 'code',
        }, {
            title: '数据库连接字符串',
            align: 'center',
            key: 'connStr',
        },
        {
            title: '授权模块',
            align: 'center',
            key: 'moduleName',
        },
        {
            title: '分组模式',
            align: 'center',
            key: 'usePolicy',
        },
        {
            title: '添加时间',
            align: 'center',
            key: 'addTime',
            slot: 'AddTime'
        },
        {
            title: '修改时间',
            align: 'center',
            key: 'updTime',
            slot: 'UpdTime'
        },
        {
            title: '操作',
            slot: 'Action',
            align: 'center',
        },
    ],
    load: true,
})

const chg = (data) => {
    formItem.province = data.p
    formItem.city = data.c
}

const initList = () => {
    table.load = true

    http.post('/Basic/Tenant/TreeList', toRaw(formItem), (response) => {
        table.load = false
        table.data = response.data.data
    })
}

initList()

const clear = () => {
    form.value.resetFields()
}

const add = (type, data) => {
    modal.value.show(type, data)
}
const cancel = (tenantID, status) => {
    http.post('/Basic/Tenant/Del', { tenantID: tenantID, status: status }, (response) => {
        if (response.data.flag) {
            initList()
            proxy.$Message.success(response.data.msg)
        } else {
            proxy.$Message.error(response.data.msg)
        }
    })
}

</script>